// 评论列表组件
import React, { Component } from 'react'
import dayjs from 'dayjs'
import bear from '../images/bear.JPG' // 导入图片
import classNames from 'classnames'

class CommentList extends Component {
  render() {
    return (
      // 评论列表区
      <div className="comment-list">
        {this.props.list.map(item => (
          <div key={item.id} className="comment-item">
            <div>
              <img className="user-head" src={bear} alt="头像" />
            </div>

            <div className="comment">
              <div className="user">{item.author}</div>
              <p className="text">{item.comment}</p>
              <div className="info">
                <span className="time">{dayjs(item.time).format('YYYY-MM-DD HH:mm:ss')}</span>
                <span
                  className={classNames('like', { liked: item.attitude === 1 })}
                  onClick={() => this.props.changeAttitude(item.id, item.attitude === 1 ? 0 : 1)}
                >
                  <i className="icon" />
                </span>
                <span
                  className={classNames('hate', { hated: item.attitude === -1 })}
                  onClick={() => this.props.changeAttitude(item.id, item.attitude === -1 ? 0 : -1)}
                >
                  <i className="icon" />
                </span>
                <span className="btn-hover" onClick={() => this.props.delComment(item.id)}>
                  删除
                </span>
              </div>
            </div>
          </div>
        ))}
      </div>
    )
  }
}

export default CommentList
